<template>
	<view class="page-content">
		<!-- //标题 -->
		<view class="flex-start" style="background: #fff;align-items: center;margin-bottom:15px">
			<image src="../../../static/wallet/redract.png" mode="" style="width: 4px;height: 21px;margin-right: 5px;">
			</image>
			<text>编辑优惠券信息</text>
		</view>
		<!-- 优惠券名称 -->
		<view class="flex-start" style="align-items: center;margin-bottom: 15px;">
			<view class="inputLabel">优惠券名称：</view>
			<input class="uni-input" v-model="coupon_name" placeholder="请输入"
				style="flex: 1;border: 1px solid #f0f0f0;padding: 10px 10px;border-radius: 7px;" />
		</view>

		<view class="flex-start" style="align-items: center;margin-bottom: 15px;">
			<view class="inputLabel">选择类型：</view>
			<view class="uni-input-wrapper flex-start"
				style="flex: 1;align-items: center;padding: 0px 0px;border-radius: 7px;">
				<uni-data-select v-model="coupon_type" :localdata="typeOptions" @change="typeChange"></uni-data-select>
			</view>
		</view>

		<view class="flex-start" style="align-items: center;margin-bottom: 15px;">
			<view class="inputLabel">适用钓场：</view>
			<view class="uni-input-wrapper flex-start"
				style="flex: 1;align-items: center;padding: 0px 0px;border-radius: 7px;">
				<zxz-uni-data-select v-model="place_ids" multiple dataKey="fish_place_name" dataValue="id"
					:localdata="placeList"></zxz-uni-data-select>
			</view>
		</view>



		<view class="flex-start" style="align-items: center;margin-bottom: 15px;">
			<view class="inputLabel">优惠券金额：</view>
			<view class="uni-input-wrapper flex-start"
				style="flex: 1;align-items: center;border: 1px solid #f0f0f0;padding: 10px 10px;border-radius: 7px;">
				<input class="uni-input" placeholder="输入金额" v-model="coupon_price" style="flex:1;" />
				<text class="uni-icon">元</text>
			</view>
		</view>

		<view class="flex-start" style="align-items: center;margin-bottom: 15px;">
			<view class="inputLabel">可使用最低票价：</view>
			<view class="uni-input-wrapper flex-start"
				style="flex: 1;align-items: center;border: 1px solid #f0f0f0;padding: 10px 10px;border-radius: 7px;">
				<input class="uni-input" placeholder="输入金额" v-model="use_price" style="flex:1;" />
				<text class="uni-icon">元</text>
			</view>
		</view>

		<view class="flex-start" style="align-items: center;margin-bottom: 15px;">
			<view class="inputLabel">数量：</view>
			<view class="uni-input-wrapper flex-start"
				style="flex: 1;align-items: center;border: 1px solid #f0f0f0;padding: 10px 10px;border-radius: 7px;">
				<input class="uni-input" placeholder="输入优惠券数量" v-model="use_number" style="flex:1;" />
				<text class="uni-icon">张</text>
			</view>
		</view>

		<view class="flex-start" style="align-items: center;margin-bottom: 15px;">
			<view class="inputLabel">有效期至：</view>
			<view class="uni-input-wrapper flex-start"
				style="flex: 1;align-items: center;padding: 0px 0px;border-radius: 7px;border: 1px solid rgb(240, 240, 240);height: 38px;padding-left: 15px;color: gray;">
				<uni-datetime-picker type="date" v-model="endDate" @change="endDateConfirm"
					:start="endRangeDate">{{endDateValue}}</uni-datetime-picker>

			</view>
		</view>

		<view>
			<view style="margin-bottom: 10px;">
				使用规则：
			</view>
			<view class="uni-textarea">
				<textarea placeholder="请输入使用规则" v-model="rule" @blur="bindTextAreaBlur" />
			</view>
		</view>

		<view class="confirmBtn" @click="toPublish">
			发布
		</view>
	</view>
</template>

<script>
	import {
		get_post_coupon,
		get_site
	} from '../../../utils/couponApi/index.js'
	export default {
		data() {
			return {
				coupon_name: '',
				coupon_type: '代金券',
				place_ids: [],
				"coupon_price": '',
				"use_price": '',
				"use_number": '',
				"off_date": '',
				"rule": '',
				endDate: '',
				endDateValue: '请选择有效期时间',
				endRangeDate: '',
				typeOptions: [{
					value: '代金券',
					text: "代金券"
				}],
				placeList: []
			}
		},
		methods: {

			typeChange(e) {

			},
			timeChange(e) {

			},
			bindTextAreaBlur(e) {
			
			},
			endDateConfirm(e) {
		
				this.endDateValue = e
			},
			async toPublish() {
				if(this.coupon_name==''){
					uni.showToast({
						title: '请输入优惠券名称',
						 icon: 'none',
					})
					return
				}
				if(this.coupon_type==''){
					uni.showToast({
						title: '请选择类型',
						 icon: 'none',
					})
					return
				}
				if(this.place_ids.length==0){
					uni.showToast({
						title: '请选择钓场',
						 icon: 'none',
					})
					return
				}
				if(this.coupon_price==''){
					uni.showToast({
						title: '请输入优惠金额',
						 icon: 'none',
					})
					return
				}
				if(this.use_price==''){
					uni.showToast({
						title: '请输入可使用最低票价',
						 icon: 'none',
					})
					return
				}
				if(this.use_number==''){
					uni.showToast({
						title: '请输入优惠券数量',
						 icon: 'none',
					})
					return
				}
				if(this.endDateValue==''){
					uni.showToast({
						title: '请选择有效期时间',
						 icon: 'none',
					})
					return
				}
				if(this.rule==''){
					uni.showToast({
						title: '请输入使用规则',
						 icon: 'none',
					})
					return
				}

				let place_ids=this.placeList.filter(item=>{
					 if(this.place_ids.indexOf(item.id)!=-1) {
						 return item
					 }
				})
				
				let data = {
					"coupon_name": this.coupon_name,
					"coupon_type": this.coupon_type,
					"place_ids": place_ids,
					"coupon_price": this.coupon_price,
					"use_price": this.use_price,
					"use_number": this.use_number,
					"off_date": this.endDateValue,
					"rule": this.rule
				}
				let res = await get_post_coupon(data)
				if (res.code == 200) {
					uni.showToast({
						title: '发布成功',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'success',
						//显示持续时间为 2秒
						duration: 2000
					})
					setTimeout(() => {
						uni.switchTab({
							url: `/pages/tabBar/self/index`
						})
					}, 1000)
				}


			},
			//获取钓场
			async get_place() {
				let res = await get_site({})
				this.placeList = res.data
			}
		},
		onShow() {
			this.endRangeDate = new Date()
			this.get_place()
		},
		
	}
</script>

<style lang="scss" scoped>
	.page-content {
		height: calc(100vh - 44px);
		background: #fff;
		padding: 12px;
		position: relative;
	}

	.uni-textarea {
		border: 1px solid #f0f0f0;
		padding: 10px 10px;
		border-radius: 7px;
	}

	:deep(.uni-select__input-placeholder) {
		font-size: 16px !important;
		color: gray;
	}

	:deep(.uni-select) {
		height: 42px;
		border-radius: 7px;
	}

	.confirmBtn {
		position: absolute;
		width: 70%;
		background: #D43030;
		bottom: 30px;
		left: 15%;
		height: 40px;
		border-radius: 20px;
		color: #fff;
		text-align: center;
		line-height: 40px;
	}
</style>